<template>
  <el-container class="settings-container">
    <!-- 侧边栏 -->
    <el-aside width="260px" class="settings-sidebar">
      <h3 class="sidebar-title">Settings</h3>
      <el-menu
        class="settings-menu"
        :default-active="activeMenu"
        background-color="#F9F9F9"
        text-color="#333"
        active-text-color="#409EFF"
      >
        <el-menu-item index="1">
          <i class="el-icon-user"></i>
          <span>You and SparkieLink</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-lock"></i>
          <span>Autofill and passwords</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-lock"></i>
          <span>Privacy and security</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-lightning"></i>
          <span>Performance</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-brush"></i>
          <span>Appearance</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-search"></i>
          <span>Search engine</span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-globe"></i>
          <span>Default browser</span>
        </el-menu-item>
        <el-menu-item index="8">
          <i class="el-icon-refresh"></i>
          <span>On startup</span>
        </el-menu-item>
        <el-menu-item index="9">
          <i class="el-icon-chat-dot-square"></i>
          <span>Languages</span>
        </el-menu-item>
        <el-menu-item index="10">
          <i class="el-icon-download"></i>
          <span>Downloads</span>
        </el-menu-item>
        <el-menu-item index="11">
          <i class="el-icon-bell"></i>
          <span>Accessibility</span>
        </el-menu-item>
        <el-menu-item index="12">
          <i class="el-icon-cpu"></i>
          <span>System</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主体内容 -->
    <el-main class="settings-main">
      <h2 class="main-title">Join Us!</h2>
      <p class="sub-title">SparkieLink，为教育与管理提供高效助力</p>
      <div class="divider"></div>

      <el-card class="user-info-card">
        <div class="user-header">
          <div class="user-basic">
            <h3>Undefine</h3>
            <p>email.com</p>
          </div>
          <el-button class="turn-off-btn">Log In</el-button>
        </div>
        <el-divider></el-divider>
        <div class="user-settings-list">
          <el-row>
            <el-col :span="24">
              <el-link href="#" class="settings-link">Sync and SparkieLink services</el-link>
            </el-col>
            <el-col :span="24">
              <el-link href="#" class="settings-link">Manage your SparkieLink Account</el-link>
            </el-col>
            <el-col :span="24">
              <el-link href="#" class="settings-link">Customize your personal profile</el-link>
            </el-col>
            <el-col :span="24">
              <el-link href="#" class="settings-link">Import interested project list</el-link>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "Settings",
  setup() {
    const activeMenu = ref("1");

    return {
      activeMenu
    };
  }
});
</script>

<style scoped>
/* 整体布局容器 */

.settings-container {
  background-color: #ffffff;
  min-height: 100vh;
}

/* 侧边栏 */
.settings-sidebar {
  background-color: #F9F9F9;
  min-height: 100vh;
  padding-top: 16px;
  border-right: 1px solid #ebebeb;
}

.sidebar-title {
  margin-left: 16px;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #333;
}

/* 侧边栏菜单 */
.settings-menu {
  border-right: none;
}

/* 主内容区域 */
.settings-main {
  background-color: #fff;
  min-height: 100vh;
  padding: 24px;
  color: #333;
}

/* 标题和副标题 */
.main-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.sub-title {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

/* “开始探索”按钮 */
.explore-btn {
  margin-top: 20px;
  background-color: #ff7e42; /* 橙色 */
  border-color: #ff7e42;
  color: #fff;
  font-weight: 500;
  padding: 10px 20px;
  font-size: 14px;
}

/* 分割线 */
.divider {
  margin: 40px 0 20px;
  height: 1px;
  background-color: #ebebeb;
}

/* 卡片样式 */
.user-info-card {
  background-color: #fff;
  border: 1px solid #ebebeb;
  color: #333;
  box-shadow: none;
}

/* 用户信息头部 */
.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-basic h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}
.user-basic p {
  margin: 4px 0 0;
  color: #888;
}

/* 关闭同步按钮 */
.turn-off-btn {
  background-color: #f0f0f0;
  border-color: #dcdcdc;
  color: #333;
  font-weight: 500;
}

/* 链接列表 */
.user-settings-list {
  margin-top: 12px;
}
.settings-link {
  color: #409EFF;
  font-size: 14px;
}
.settings-link:hover {
  text-decoration: underline;
}
</style>